<template>
  <div id="app">
    <header class="head">
       <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">基本情况</small>
      </a>
      <a href="javascript:;" class="tr">
        <small class="font_18 co_f"></small>
      </a>
    </header>
    <main>
      <ul class="list_box">
        <li v-for="item in this.$store.state.muneData" :key="item.name">
          <router-link :to='{name:routerto(item.menu.code),params:{unid: item.unid}}'>
            <div class="list_img">
              <img :src="selectImg(item.menu.code)">
            </div>
            <p>{{item.menu.name}}</p>
          </router-link>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
  import {
    Menulist
  } from '../../api/api';
  import {
    mapState
  } from 'vuex'
  export default {
    name: 'list',
    data() {
      return {
        menuUnid: this.$route.query.menuUnid,
      };
    },
    created() {
      let mune = JSON.parse(localStorage.getItem('mune'));
      localStorage.setItem('mune', JSON.stringify({
        menuUnid: this.$route.query.menuUnid,
      }));
    },
    computed: {
      ...mapState({
        ledger: state => state.managementStore.ledger,
      }),
    },
    methods: {
      //query() 是用于搜索的项目
      //数据加载方法
      getMemuData() {
        //定义需要传给通讯的参数：menuUnid userUnid    
        let options = {
          params: {
            menuUnid:this.menuUnid,
            userUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
          }
        }
        //调取接口
        Menulist(options).then((res) => {
          if (res.success === true) {
            this.$store.state.muneData = res.data; //数据缓存起来
          }
        })
      },
      //图片重定向
      selectImg(code) {
        this.src = this.ledger[0].src;
        switch (code) {
          case ("SPLB"):
            { 
              this.src = this.ledger[0].src;
              break
            };
          case ("SPMC"):
            {
              this.src = this.ledger[1].src;
              break
            };
          case ("CSSB"):
            {
              this.src = this.ledger[2].src;
              break
            };
          case ("GLRY"):
            {
              this.src = this.ledger[3].src;
              break
            };
          case ("GYS"):
            {
              this.src = this.ledger[4].src;
              break
            };
            break;
        };
        return this.src;
  
      },
      //地址指向
      routerto(code) {
        this.goto = "";
        switch (code) {
          case ("SPLB"):
            {
              this.goto = "SPLB"
              break
            };
          case ("SPMC"):
            {
              this.goto = "SPMC"
              break
            };
          case ("GLRY"):
            {
              this.goto = "GLRY"
              break
            };
          case ("CSSB"):
            {
              this.goto = "CSSB"
              break
            };
          case ("GYS"):
            {
              this.goto = "GYS"
              break
            };
        };
        return this.goto;
      },
    },
    mounted() {
      this.getMemuData();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .list_box {
    width: 100%;
    li {
      width: 49.5%;
      float: left;
      text-align: center;
      /* margin-top: 10px; */
      box-sizing: border-box;
      padding: 22px 0px 15px;
      margin-bottom: 0.8%;
      font-size: 0.95rem;
      p {
        margin: 0.5em 0;
      }
    }
  }
  
  .list_box li:nth-child(odd) {
    margin-right: 0.5%;
    // border-right: 1px solid #ccc;
    // border-bottom: 1px solid #ccc;
    // border-top: 1px solid #ccc;
  }
  
  .list_box li:nth-child(even) {
    margin-left: 0.5%;
    // border-left: 1px solid #ccc;
    // border-bottom: 1px solid #ccc;
    // border-top: 1px solid #ccc;
  }
  
  .list_img {
    width: 45px;
    height: 45px;
    margin: auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
